{include file="public/com_header"}

<body style="padding:10px;">
<div class="tplay-body-div">
    <fieldset class="layui-elem-field site-demo-button" style="margin-top: 30px;border:0">
        <!--<form  id="qrCodeUrlForm" class="layui-form" autocomplete="off">-->
            <div class="layui-form-item">
                <label class="layui-form-label"> Url地址 </label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" name="qrcode_url"  id="qrcode_url" lay-verify="qrcode_url" autocomplete="off" placeholder="生成二维码的Url地址"  style="width: 500px;";>
                </div>
                <div class="layui-input-block" style="float:right;right:50px;">
                    <button class="layui-btn layui-btn-sm layui-btn-normal" lay-submit lay-filter="qrCodeUrlSub" id="generate">生成</button>
                </div>
            </div>
        <div class="row" style="margin: 10px 40%;">
            <!--<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">-->
            <div class="layui-col-md9">
                <div id="qrcode"></div>
                <p  id="qrcode-url" style="margin-top:5px;color:red"></p>
            </div>
        </div>
        <!--</form>-->
        <!--<div id="markdown"></div>-->
    </fieldset>

    <script type="text/javascript" src="__PUBLIC__/qrcode/qrcode.min.js"></script>
    <script type="text/javascript" src="__PUBLIC__/showdown/1.4.2/showdown.min.js"></script>
    <script>

        layui.use(['layer', 'form'], function() {
            var layer = layui.layer,
                $ = layui.jquery,
                form = layui.form;
                $(function () {
                    // var url = 'https://github.com/yuan1994/tpadmin';
                    var url = 'http://www.hao123.com';
                    var qrcode = new QRCode(document.getElementById("qrcode"), {
                        text: url,
                        width: 128,
                        height: 128,
                        colorDark : "#000000",
                        colorLight : "#ffffff",
                        correctLevel : QRCode.CorrectLevel.H
                    });
                    $("#qrcode-url").html(url);
                    $("#generate").click(function () {
                        url = $("#qrcode_url").val();
                        if (!url || !/^[\w]*:\/\//i.test(url)) {
                            layer.alert('请输入正确的链接，支持 URL Scheme');
                            return ;
                        }
                        qrcode.makeCode(url);
                        $("#qrcode-url").html(url);
                    });

                    // var converter = new showdown.Converter(),
                    //     text      = $("#markdown_tpl").html();
                    // $("#markdown").html(converter.makeHtml(text));
                })

            $(window).on('load', function() {
                // form.verify({
                //     qrcode_url : function(value,item){
                //         console.log(value);
                //         if(value.length == 0){
                //             return "Url地址不能为空";
                //         }
                //         if (!value || !/^[\w]*:\/\//i.test(value)) {
                //             // layer.alert('请输入正确的链接，支持 URL Scheme');
                //             return '请输入正确的链接，支持 URL Scheme';
                //         }
                //
                //     },
                //
                // });

                // form.on('submit(qrCodeUrlSub)', function(data) {
                //     $.ajax({
                //         url:"{:url('admin/Tools/qrCode')}",
                //         data:$("qrCodeUrlForm").serialize(),
                //         type:'post',
                //         async: false,
                //         success:function(res) {
                //             if(res.code == 1) {
                //                 var htmlStr = '<lable class="layui-lable"> 唯一的标识</lable><br><span>'+res.msg+'</span>';
                //                 layer.alert(htmlStr);
                //                 // layer.alert(res.msg)
                //             } else {
                //                 layer.alert("生成失败！")
                //             }
                //         }
                //     })
                //     return false;
                // });

            });
        });
    </script>




</div>
</body>
</html>
